<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>todos</title>
    <style>
        .done {
            color: gray;
            text-decoration: line-through;
        }
    </style>
</head>
<body>

<div id="app">
    <!--<h2>{{title}}</h2>-->
    <input type="text" v-model="title" @keydown.enter="addTodo">
    <ul v-if="todos.length">
        <li v-for="todo in todos">
            <label>
                <input type="checkbox" v-model="todo.done">
                <span :class="{done:todo.done}">
                {{todo.title}}
            </span>
            </label>
        </li>
    </ul>
    <div v-else>
        暂无数据
    </div>

    <div>
        <label>
            <input type="checkbox" v-model="allDone">
            全选
        </label>
        {{active}} / {{all}}
    </div>
    <button v-if="active<all" @click="clear">清理</button>
</div>

<script src="https://unpkg.com/vue@next"></script>
<script>
    const App = {
        data() {
            return {
                title: '',// 定义一个数据
                todos: [
                    {title: '吃饭', done: false},
                    {title: '睡觉', done: true}
                ],
            };
        },
        methods: {
            addTodo() {
                this.todos.push({
                    title: this.title,
                    done: false
                })
                this.title = ''
            },
            clear() {
                this.todos = this.todos.filter(v => !v.done);
            }
        },
        computed: {
            active() {
                return this.todos.filter(v => !v.done).length;
            },
            all() {
                return this.todos.length;
            },
            allDone: {
                get() {
                    return this.active === 0;
                },
                set(val) {
                    this.todos.forEach(todo => {
                        todo.done = val
                    })
                }
            },
        },
    };
    // 启动应用
    Vue.createApp(App).mount('#app');
</script>

</body>
</html>